<template>
    <el-select
            v-model="selectedValue"
            class="inspector-select"
            placeholder=""
            @click="getInvestigators"
            @change="handleChange"
            clearable
    >
        <el-option
                v-for="item in usernames"
                :key="item.username"
                :value="item.username"
                :label="`${item.username}`"
                class="inspector-option"
        />
    </el-select>
</template>

<script>
    import request from "@/utils/request";

    export default {
        name: "InvestigatorSelect",
        props: {
            value: {
                type: String,
                default: ""
            },
            placeholder: {
                type: String,
                default: "选择检查人员"
            },
            // 自动填充的目标字段名（如 'dangShiRenId1'）
            idField: {
                type: String,
                default: ""
            }
        },
        data() {
            return {
                usernames: [],
                selectedValue: this.value
            };
        },
        watch: {
            value(newVal) {
                this.selectedValue = newVal;
            }
        },
        methods: {
            async getInvestigators() {
                try {
                    const res = await request.get("/user/allIdentificationNumber");
                    this.usernames = res.data.map(user => ({
                        username: user.username,
                        identificationNumber: user.identificationNumber,
                    }));
                } catch (error) {
                    console.error("获取检查人员列表失败:", error);
                }
            },
            handleChange(value) {
                const selectedUser = this.usernames.find(user => user.username === value);
                const payload = {
                    username: value,
                    identificationNumber: selectedUser ? selectedUser.identificationNumber : '',
                    idField: this.idField
                };

                this.$emit("input", value);
                this.$emit("change", payload);
            }
        }
    };
</script>

<style scoped>
    /* 完全移除选择框的所有边框和阴影 */
    :deep(.inspector-select .el-input__inner) {
        border: none !important;
        outline: none !important;
        box-shadow: none !important;
        font-family: "仿宋", "FangSong", serif !important;
        font-size: 5mm !important;
        padding: 0 10px !important;
        background-color: transparent !important;
        height: auto !important;
        line-height: normal !important;
    }

    /* 移除提示语 */
    :deep(.el-input__inner::placeholder) {
        color: transparent !important;
    }

    /* 移除下拉箭头 */
    :deep(.el-input__suffix) {
        display: none !important;
    }

    /* 移除聚焦状态下的边框 */
    :deep(.inspector-select .el-input__inner:focus) {
        border: none !important;
        box-shadow: 0 0 0 0 !important;
    }

    /* 下拉面板样式 */
    .inspector-popper {
        border: none !important;
        box-shadow: none !important;
        font-family: "仿宋", "FangSong", serif !important;
        font-size: 5mm !important;
    }

    /* 下拉选项样式 */
    :deep(.inspector-popper .el-select-dropdown__item) {
        font-family: "仿宋", "FangSong", serif !important;
        font-size: 5mm !important;
        height: auto !important;
        padding: 5px 10px !important;
    }

    /* 选中项样式 */
    :deep(.inspector-popper .el-select-dropdown__item.selected) {
        color: #000 !important;
        font-weight: normal !important;
        background-color: #f5f5f5 !important;
    }
</style>
